<template>
   <div class="list" ref="wrapper">
	  <div>
	  	 <div class="area">
	     <div class="title">当前城市</div>
	     <div class="button-list">
	     	<div class="button-wrapper">
	     		<div class="button">{{this.city}}</div>
	     	</div>
	     </div>
	   </div>
	   <div class="area">
	   	<div class="title">热门城市</div>
	   	 <div class="button-list">
	     	<div class="button-wrapper" v-for="item of hot" :key="item.id" @click="handleCityClick(item.name)">
	     		<div class="button">{{item.name}}</div>
	     	</div>
	     </div>
	   </div>
	   <div class="area" v-for="(item,key) of cities" :key="key" :ref="key">
	   		<div class="title">{{key}}</div>
	   		<div class="item-list">
	   			<div class="item" v-for="list of item" :key="list.id"  @click="handleCityClick(list.name)" >{{list.name}}</div>
	   		</div>
	   </div>
	  </div>
   </div>
</template>

<script>
	import BScroll from 'better-scroll'
	import { mapState, mapMutations } from 'vuex'
	export default {
		name: 'CityList',
		computed: {
			...mapState(['city'])
		},
		props: {
			hot: Array|Object,
			cities: Object,
			letter: String
		},
		methods: {
			handleCityClick (city) {
//				this.$store.commit('changeCity', city)
                this.changeCity(city)
				this.$router.push('/')
			},
			...mapMutations(['changeCity'])//写了这个，那就不用这样写（this.$store.commit('changeCity', city)）
		},
		mounted () {
			this.scroll = new BScroll(this.$refs.wrapper)
		},
		watch: {
			//监听单击某个字母，就显示哪块区域
			letter () {
				if (this.letter) {
					const element = this.$refs[this.letter][0]
					this.scroll.scrollToElement(element)
				}
//				console.log(this.letter)
			}
		}
	}
</script>

<style lang="stylus" scoped="scoped">
   @import '~styles/varibles.styl'
  .list
    overflow:hidden
    position:absolute
    top:80px
    left:0
    right:0
    bottom:0
   .title
     line-height:27px
     background:#eee
     padding-left:10px
     color:#666
   .button-list
     overflow:hidden
     padding:3px 10px
     .button-wrapper
       float:left
       width:33.33%
       .button
         margin:10px
         text-align:center
         border:1px solid #ccc
         padding: 5px 0;
         border-radius: 3px;
   .item-list
     .item
      line-height:32px
      color:#666
      padding-left:15px
      border-bottom:1px solid #ccc
</style>